<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import logo from "../assets/images/logo.png";
import { useStore } from "../stores/system";
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useStore();
const router = useRouter();
defineProps({
  msg: {
    type: String,
    required: true,
  },
});
const hangdleClick = () => {
  store.isLogin ? jump("/userCenter") : jump("/login");
};
let jump = (val) => {
  router.push({ path: val });
};
const goToPublish = (val) => {
  if (val === 1) {
    jump("/publish");
  } else {
    if (!store.isLogin) {
      ElMessageBox.confirm("查看我的发布请先登录！", "提示", {
        confirmButtonText: "已有账号，去登录",
        cancelButtonText: "知道了",
        type: "warning",
      }).then(() => {
        jump("/login");
      });
    } else {
      jump("/myPublish");
    }
  }
  // }
};
</script>

<template>
  <div style="width: 100%; height: 100%">
    <el-image class="image" :src="logo" lazy />
    <div class="menu">
      <el-icon> <List /> </el-icon><span @click="jump('/')">首页</span>
      <el-icon> <Search /> </el-icon
      ><span @click="jump('/search')">实习库</span>
      <el-icon>
        <EditPen />
      </el-icon>
      <el-dropdown trigger="click">
        <span style="font-size: 16px">发布</span>
        <template #dropdown>
          <el-dropdown-menu style="color: #409eff">
            <el-dropdown-item @click="goToPublish(1)"
              >发布实习</el-dropdown-item
            >
            <el-dropdown-item @click="goToPublish(2)">
              我的发布
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-icon> <UserFilled /> </el-icon
      ><span @click="hangdleClick">{{
        store.isLogin ? "个人中心" : "管理员"
      }}</span>
    </div>
  </div>
</template>

<style scoped>
.image {
  width: 300px;
  height: 10vh;
  float: left;
}

.el-icon {
  font-size: 16px;
  top: 3px;
  color: white;
}
.el-menu--horizontal {
  border-bottom: 0;
}

span {
  margin-right: 20px;
  line-height: 10vh;
  cursor: pointer;
  color: white;
}

.menu {
  float: right;
  height: 100%;
}

.el-row {
  height: 30px;
  margin-top: 50px;
  height: 100%;
}

.span {
  text-align: center;
  /* height: 100%; */
  font-size: 22px;
  font-weight: bolder;
  font-size: 0.18rem;
  color: #ffffff;
  cursor: pointer;
}

.span:hover {
  color: #f7f460;
}

.router-link:hover {
  color: #f7f460;
}
</style>
